<template>
  <div class="all">
    <van-tabs v-model="active">
      <van-tab class="content" :title="`加盟${$route.query.franchisee_type == 'car' ? '车' : '商'}信息`" name="a">
        <van-form v-model="shoper">



          <new-item v-model="shoper.show_date" :is_disabled="true" class="change_item" :is_require="false"
            txt_tip="合作时间"></new-item>
          <new-item v-model="shoper.tax_number" :is_disabled="true" class="change_item" :is_require="false"
            txt_tip="纳税识别号"></new-item>
          <new-item v-model="shoper.bank_number" :is_disabled="true" class="change_item" :is_require="false"
            txt_tip="银行卡号"></new-item>
          <new-item v-model="shoper.open_bank_name" :is_disabled="true" class="change_item" :is_require="false"
            txt_tip="开户行"></new-item>
          <new-item v-model="shoper.id_card" :is_disabled="true" class="change_item" :is_require="false" txt_tip="身份证号">
          </new-item>
          <new-item v-model="shoper.bond" :is_disabled="true" class="change_item" :is_require="false" txt_tip="保证金">
          </new-item>
          <new-item v-model="shoper.management_fee" :is_disabled="true" class="change_item" :is_require="false"
            txt_tip="品牌管理费"></new-item>
          <new-item v-model="shoper.franchisee_fee" :is_disabled="true" class="change_item" :is_require="false"
            txt_tip="加盟费"></new-item>
          <new-item v-model="shoper.sign_date" :is_disabled="true" class="change_item" :is_require="false"
            txt_tip="签约日期"></new-item>
          <div>

            <upload-multi :deletable="false" :disabled="true" class="wrap_img" v-model="shoper.cooperation_images"
              prop_title="合同照片" />
          </div>


          <div class="wrap_button">

            <div @click="check" class="c_flex charge_button">
              审核
            </div>
            <div @click="edit" class="c_flex charge_button">
              修改
            </div>
          </div>

        </van-form>

      </van-tab>
      <van-tab v-if="$route.query.franchisee_type == 'franchisee'" class="content" title="加盟车信息" name="b">
        <div class="car">
          <div class="title">加盟车</div>
          <div class="btn">
            <div class="left c_flex">
              <div class="big">{{carLength}}</div>
              <div class="small">辆</div>
            </div>
            <div @click="addCar" class="right c_flex">
              新增加盟车
            </div>
          </div>
          <div class="list">
            <div class="head flex-between ">
              <div class="fix_width">加盟车id</div>
              <div>加盟车名称</div>
              <div class="fix_width">车牌号</div>
            </div>
            <div v-for="(item ,index) in carList " :key="index" class="item flex-between ">
              <div class="fix_width">{{item.id}}</div>
              <div>{{item.franchisee_name}}</div>
              <div class="fix_width">{{item.plate}}</div>
            </div>
           
          </div>
        </div>
      </van-tab>
    </van-tabs>
    <check :show_add.sync="show_verify" :shoper="shoper" :shoper_id="$route.query.id" />
    <out-sky :type="crud_type" :shoper="shoper" :franchisee_type="role_type" :show_add.sync="show_update" :key="count" />
  </div>
</template>

<script>
  import {
    ShoperService
  } from '@/api'
  import uploadMulti from '@/components/Upload/multi.vue'
  import NewItem from '../form/NewItem.vue';
  import Check from '@/views/detail/check.vue'
  import OutSky from '../form/OutSky.vue';
  export default {
    computed: {
      carLength() {
        let count = 0 
        if(typeof(this.shoper.cars) == "object") {

          return this.shoper.cars.length
        }
        return count;
      },
      carList(){
        if(typeof(this.shoper.cars) == "object"){
          return this.shoper.cars
        }
        return [];
      }
    },
    components: {
      NewItem,
      uploadMulti,
      Check,
      OutSky,
    },
    data() {
      return {
        active: 'a',
        shoper: {},
        show_verify: false,
        show_update: false,
        crud_type: '',
        role_type: '',
        count: 0,
      }
    },
    watch:{
      active(val){
        console.log(val)
        this.count++;
      }
    },
    mounted() {
      this.$EventBus.$on("update_one", () => {
        this.init();
      })
      this.init();
    },
    methods: {
      init() {
        ShoperService.getOne({relation: 'cars'}, this.$route.query.id).then(res => {
          console.log(res)
          this.shoper = res.data;
          this.shoper.status = String(this.shoper.status)
          this.shoper.show_date = res.data.cooperation_start_date + '~' + res.data.cooperation_end_date;
        });
      },
      check() {
        this.show_verify = true;
      },
      edit() {
        this.crud_type = 'update';
        this.role_type = this.$route.query.franchisee_type;
        this.show_update = true;
      },
      addCar(){
        this.crud_type = 'add';
        this.role_type = 'car';
        this.show_update = true;
      }
    },
  }
</script>

<style scoped lang="less">
  .all {
    margin: 0;
    padding: 30px 24px;
    background-color: #f3f5f7;
    min-height: calc(93vh);
    box-sizing: border-box;

    /deep/.van-tabs__wrap {
      height: 70px;
    }

    /deep/.van-tab {
      font-size: 28px;
    }

    /deep/.van-tab__text {
      display: flex;
      height: 70px;

      justify-content: center;
      align-items: center;
    }

    .content {

      .car {
        padding: 50px 32px;
        min-height: 75vh;
        background-color: #fff;

        .title {
          color: rgba(51, 51, 51, 1);
          font-size: 20px;
          margin-bottom: 16px;
        }

        .btn {
          display: flex;
          justify-content: space-between;

          .left {
            width: 280px;
            height: 80px;
            background-color: rgba(255, 248, 227, 1);
            border-radius: 8px;

            .big {
              font-size: 38px;
              margin-right: 10px;
            }

            .small {
              font-size: 18px;
            }
          }

          .right {
            width: 180px;
            height: 80px;
            border: 1px solid rgba(204, 204, 204, 1);
            border-radius: 8px;
            color: rgba(51, 51, 51, 1);
            font-size: 20px;
          }
        }

        .list {
          margin-top: 30px;

          .fix_width {
            width: 100px;
          }
          .head {

            font-size: 24px;

          }

          .item {
            margin-top: 15px;
            font-size: 20px;
            color: rgba(112, 112, 112, 1);
          }
        }
      }

      .change_item {
        background-color: #fff;
        margin-top: 35px;

        color: #000000;

        /deep/.van-field__control:disabled {
          color: #000000;
          -webkit-text-fill-color: #000000;
        }

        /deep/.van-field__label {
          color: #000000;
        }

        .wrap_img {
          background-color: #fff;
          margin-top: 15px;
        }

      }

      .wrap_button {
        display: flex;
        justify-content: space-evenly;

        .charge_button {
          width: 220px;
          height: 80px;
          background-color: rgba(242, 147, 33, 1);
          border-radius: 8px;
          color: rgba(255, 255, 255, 1);
          font-size: 28px;
          border-width: 0px;

          margin: 50px auto 30px;
        }
      }
    }
  }
</style>